<template>
  <div class="container">
    <div class="navigationBar" style="width: 98%;margin: 10px auto 0">
      <el-row :gutter="26">
        <!-- 搜索框 -->
        <el-col :span="3">
          <el-input v-model="storename" placeholder="机构" clearable></el-input>
        </el-col>
        <el-col :span="3.3">
          <el-input v-model="username" placeholder="用户"></el-input>
        </el-col>
        <el-col  :span="4">
          <el-button type="primary" icon="el-icon-search" @click="searchActivity">搜索</el-button>
        </el-col>
        <el-col :span="10">
          <el-button type="primary" @click="addvideo()">增加</el-button>
        </el-col>
      </el-row>
    </div>

    <el-table :data="videoList" style="width: 98%;margin: 10px auto 0" border :key="videoList.length" class="table" v-loading="loading" element-loading-text="拼命加载中....">
      <el-table-column label="所属用户" align="center">
        <template slot-scope="{row}">
          <span>{{row.customer_name}}</span>
        </template>
      </el-table-column>

      <el-table-column label="所属机构" align="center">
        <template slot-scope="{row}">
          <span>{{row.store_name}}</span>
        </template>
      </el-table-column>

      <el-table-column label="上传时间" align="center">
        <template slot-scope="{row}">
          <span>{{newtime(row.create_time)}}</span>
        </template>
      </el-table-column>

      <el-table-column label="课程科目" align="center">
        <template slot-scope="{row}">
          <span v-for="(subject,id) in row.subjects_name" :key="id">
            {{subject}}
          </span>
          <!-- <el-checkbox-group v-model="row.subjects_id">
            <el-checkbox v-for="subject in subject" :label="subject.id" :key="subject.id" disabled>{{subject.name}}</el-checkbox>
          </el-checkbox-group> -->
        </template>
      </el-table-column>

      <el-table-column label="视频" align="center">
        <template class="block" slot-scope="{row}">
          <!-- <img v-if="row.head_img.length>20" :src="row.head_img" lazy="true" width="50px" @click="openvideo(row.video_url)"></img> -->
          <div :style="{backgroundImage:'url('+row.head_img+')'}" class="image1">
            <i class="el-icon-video-play" style="font-size:50px" @click="openvideo(row.video_url)"></i>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center">
        <template slot-scope="{row}">
          <el-button type="primary" @click="delrecommended(row.id)">移除</el-button>
        </template>
      </el-table-column>
      <el-dialog
        width="30%"
        title="视频"
        :visible.sync="dialogVisible1"
        append-to-body
        :before-close="handleClose">
        <video id="myVideo" width='100%' controls>
          <source :src='video' type="video/mp4">
        </video>
      </el-dialog> 
    </el-table>
    <addvideo ref="addvideodialog"/>

    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="this.listQuery.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="this.listQuery.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.listQuery.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import store from '@/store'
  import {list, del, edit} from '@/api/thk/activity'
  import {list as getCustomerList} from '@/api/thk/customer'
  import {list as getStoreList} from '@/api/thk/store'
  import {getSubject} from '@/api/thk/store'
  import {getActivityPerformance} from '@/api/thk/performance'
  import request from '@/utils/request'
  import addvideo from './addvideo'
  import {getlist,upd,getrecommendlist,upd_type_recommend} from '@/api/thk/ashortvideo'



  export default {
    name: 'videorecommended',
    components: {
      addvideo
    },
    data() {
      return {
        // save storeList field
        addvideoList:[],
        videoList: [],
        subject:[],
        bigImageSrc: null,
        dialogVisible: false,
        dialogVisible1:false,
        customerList: [],
        storeList: [],
        detail:"",
        formThead: {
          user:true,
          shop:true,
          upload_time:true,
          course_subjects:true,
          default_like:true,
          on_course:true,
          shelves_box:true,
          video:true,
          to_audit:true,
          not_through:true,
          through:true
        },

        listQuery: {
          name: undefined,
          detail:undefined,
          time: null,
          page: 1,
          pagesize: 10,
          type: 1
        },

        loading: true,
        total: 0,
        value1: '',
        storename:'',
        username:'',

        detail: '',
        subjects:'',
        welfare:'',
        head_img:'',
        video:undefined,
        video_id:undefined,
      }
    },
    inject: ['reload'],

    // created生命周期中调用获取活动列表方法
    created(){
        this.getvideoList();
        // this.getSubject();
        // this.getaddvideoList();
        this.loading=false;
    },

    methods: {
      newtime(num){
        return new Date(num*1000).toLocaleString();
      },
      handleSizeChange(val) {
        this.listQuery.pagesize = val
        this.getvideoList()
      },
      handleCurrentChange(val) {
        this.listQuery.page = val
        console.log()
        this.getvideoList()
      },
      searchActivity(){
        this.getname()
        this.getvideoList()
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
        .then(_ => {
          done();
          this.reload();
        })
        .catch(_ => {this.reload();});
        let videos=document.getElementById("myVideo")
        // document.getElementById("myVideo")
        videos.pause()
        this.video=undefined
      },
      opendetail(detail){
        
      },
      Changestate(id,type,status,index){
        
      },
      opendetail(item){
        this.dialogVisible=true
        this.detail=item.video_detail
        this.subjects=item.activity_title
        this.welfare=item.gift_activity_title
        this.head_img=item.head_img
        this.video=item.video_url
        this.video_id=item.id
      },
      openvideo(item){
        this.dialogVisible1=true
        this.video=item
        console.log(this.video)
      },
      getvideoList(){
        const token=store.getters.token
        console.log(token)
        console.log(this.listQuery)
        getrecommendlist(token,this.listQuery.type,this.listQuery.page,this.listQuery.pagesize).then(res=>{
          const ress=res.data.data.data
          console.log(res,"9527")
          this.listQuery.total=parseInt(res.data.data.total)
          this.listQuery.page=parseInt(res.data.data.current_page)
          this.listQuery.pagesize=parseInt(res.data.data.per_page)
          console.log(this.listQuery);
          for(let i=0;i<ress.length;i++){
            ress[i].time=this.newtime(ress[i].create_time)
            // ress[i].head_img="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"
            // ress[i].video_url="http://192.168.1.68:9001/ceshi.mp4"
            if(ress[i].is_recommend===0){
              ress[i].recommend=false
            }else{
              ress[i].recommend=true
            }
          }
          this.videoList=ress.filter(item=>{
            if(this.username!=''){
              if(item.customer_name.match(this.username)){
                return item
              }
            }else if(this.storename!=''){
              if(item.store_name.match(this.storename)){
                return item
              }
            }else if(this.storename!='' && this.username!=''){
              if(item.customer_name.match(this.username) && item.store_name.match(this.storename)){
                return item
              }
            }else{
              return item
            }
          })
        })
      },
      modify(id,status){
        this.dialogVisible = false
        const token = store.getters.token
        upd(token,id,status).then(res=>{
          this.$message({
            type:'success',
            message: res.data.msg
          });
          this.searchActivity()
        })
      },
      getname(){
        this.listQuery.storename=this.storename
        this.listQuery.username=this.username
      },
      delrecommended(id,upd_type){
        const token=this.$store.getters.token
        let num=0;
        console.log(upd_type,"11111111111");
        this.$confirm('此操作将会删除推荐视频, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          upd_type_recommend(token,id,false).then(res=>{
            this.$message({
              type:'success',
              message:'移除成功'
            })
            this.reload()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
        console.log(this.customerList)
      },
      getSubject(){
        getSubject(store.getters.token).then(res=>{
          this.subject=res.data.data
          console.log(this.subject,"666")
        }).catch(err=>{
          this.$message({
            type:'error',
            message:'err.data.msg'
          })
        })
      },
      getcourse(item,subject){
        if(item!=null){
          item.subjects_id.filter(res=>{
            if(subject.id===res){
              console.log(subject.name,"6677");
              return 0;
            }
          })
        }
      },
      addvideo(){
        // console.log(this.addvideoList)
        this.$refs.addvideodialog.openaddvideoDialog()
      },
    }
  }
</script>

<style scoped>
.image1{
  /* width: 100px;
  height: 200px; */
  background-repeat:no-repeat;
	background-size:100% 100%;
  -moz-background-size:100% 100%;
  color:black
}
.image1:hover{
  color:white
}
</style>

